<template>
  <div>
    <!-- 搜索筛选 -->
    <h1>采购订单列</h1>
    <el-form :inline="true" :model="formInline" label-position="right">
      <div style="position: relative">
        <el-form-item label="订单编号" >
          <el-input size="small" clearable v-model="formInline.orderNo" placeholder="请输入订单编号" ></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select size="small" v-model="formInline.orderStatus" placeholder="全部">
            <el-option
              v-for="item in orderStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商名称" label-width="96px">
          <el-input style="width: 220px" size="small" clearable v-model="formInline.supplierCode" placeholder="请输入供应商名称"></el-input>
        </el-form-item>
        <el-form-item style="position: absolute;right: 0">
          <el-button size="small" type="primary" icon="el-icon-search" @click="getdata(formInline)">搜索</el-button>
        </el-form-item>
      </div>
      <div style="margin-top: -15px ;position: relative">
        <el-form-item label="采购仓库">
          <el-select size="small" v-model="formInline.warehouseName" placeholder="全部">
            <el-option
              v-for="item in warehouseNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品尺码">
          <el-select size="small" v-model="formInline.orderStatus" placeholder="全部">
            <el-option
              v-for="item in orderStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单创建时间">
            <el-date-picker
              style="width: 220px"
              size="small"
              v-model="formInline.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item style="position: absolute;right: 0">
          <el-button size="small" icon="el-icon-refresh-left" @click="reset">重置</el-button>
        </el-form-item>
      </div>
      <div style="margin-top: -10px">
        <hr>
      </div>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-dropdown size="small">
          <el-button size="small">
            批量操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu @command="handleCommand">
            <el-dropdown-item command="提交审核">批量提交审核</el-dropdown-item>
            <el-dropdown-item command="生成用户单">批量生成用户单</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
    </el-form>
    <!--列表-->
    <div style="border: rgb(200,200,200) 1px solid">
      <el-table size="small" @selection-change="handleSelectionChange" :data="listData" highlight-current-row
                v-loading="loading" element-loading-text="拼命加载中" style="width: 100%">
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column prop="orderNo" label="采购订单号" width="100">
        </el-table-column>
        <el-table-column prop="supplierCode" label="采购供应商" width="100">
        </el-table-column>
        <el-table-column prop="warehouseCode" label="采购仓库" width="100">
        </el-table-column>
        <el-table-column prop="quantity" label="采购量" width="100">
        </el-table-column>
        <el-table-column prop="unitPrice" label="采购单价(元)" width="100">
        </el-table-column>
        <el-table-column prop="taxInclusiveAmount" label="含税金额(元)" width="100">
        </el-table-column>
        <el-table-column prop="totalAmount" label="价税合计(元)" width="100">
        </el-table-column>
        <el-table-column prop="demandDate" label="要货日期" width="100">
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="100">
        </el-table-column>
        <el-table-column prop="purchaser" label="采购员" width="100">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="100">
        </el-table-column>
          <el-table-column label="操作" width="300">
            <template v-slot:default="slotProps">
              <el-button type="text">查看</el-button>
              <span v-show="slotProps.row.orderStatus === '待提交'">
              <el-button type="text">修改</el-button>
              <el-button type="text">提交审核</el-button>
              </span>
              <el-button type="text" v-show="slotProps.row.orderStatus === '待审核'">去审核</el-button>
              <el-button type="text" v-show="slotProps.row.orderStatus === '待收货'">确认收货</el-button>
              <el-button type="text" v-show="slotProps.row.orderStatus === '待入库'">去入库</el-button>
              <el-button type="text" v-show="slotProps.row.orderStatus === '待结算'">去入库</el-button>
              <el-button type="text" v-show="slotProps.row.orderStatus === '待提交'
              || slotProps.row.orderStatus === '待审核'
              || slotProps.row.orderStatus === '待收货'">取消订单</el-button>
            </template>
          </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <div style="position: relative">
      <Pagination v-bind:child-msg="pageparm" v-model="pageparm" @callFather="callFather" style="position: absolute;right: 0"></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "../../../components/Pagination.vue";
import {purchaseOrderList} from "../../../api/OrderMG";

export default {
  name: "purchaseOrder",
  data() {
    return {
      warehouseNameList:[//下拉框仓库名称列表
        {
          value:"",
          label:"全部"
        },
        {
          value: "广州仓",
          label: "广州仓"
        }
      ],
      orderStatus:[//订单状态下拉框列表
        {
          value:"",
          label:"全部"
        },
        {
          value:"待提交",
          label:"待提交"
        },
        {
          value:"待审核",
          label:"待审核"
        },
        {
          value:"待收货",
          label:"待收货"
        },
        {
          value:"待入库",
          label:"待入库"
        },
        {
          value:"已完成",
          label:"已完成"
        },
        {
          value:"订单关闭",
          label:"订单关闭"
        },
      ],
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加',
      editForm: {
      },
      // rules表单验证
      rules: {
        warehouseName: [
          {required: true, message: '请输入仓库名', trigger: 'blur'},
          {min: 2, message: '长度2个字符以上', trigger: 'blur'}
        ],
        warehouseCode: [
          {required: true, message: '请输入编码', trigger: 'blur'},
        ]
      },
      // 搜索表单数据
      formInline: {
        pageNum: 1,
        pageSize: 10,
        orderNo: '',
        orderStatus: '',
        supplierCode:"",
        warehouseName:"",
        createTime:""
      },
      listData: [
        {
          orderStatus:"待提交"
        }
      ], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      // 批量删除用户存储id的数组
      multipleSelection: []
      // 库区选择
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },
  methods: {
    reset(){//重置按钮
      this.formInline.orderNo= ''
      this.formInline.orderStatus= ''
      this.formInline.supplierCode=""
      this.formInline.warehouseName=""
      this.formInline.createTime=""
    },
    handleCommand(command){//批量操作

    },
    getdata(formInline) {
      console.log(formInline)
      purchaseOrderList(formInline)
        .then(res => {
          this.loading = false
          if (res.code != 20000) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            const pageInfo = res.data;
            this.listData = pageInfo.list;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.pageNum
            this.pageparm.pageSize = this.formInline.pageSize
            this.pageparm.total = pageInfo.total
            console.log(this.pageparm)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('订单信息加载失败，请稍后再试！')
        })
    },
    callFather(pageparam) {
      this.formInline.pageNum = pageparam.pageNum;
      this.formInline.pageSize = pageparam.pageSize;
      this.getdata(this.formInline)
    },
    search() {
      // console.log(this.formInline)
      this.getdata(this.formInline)
    },
    handleAdd() {//添加按钮
      this.title = "添加";
      // 表单置空
      this.editForm = {}
      this.$router.push({
        path:"/index/order/addNewOrder",
        query:{
          title:this.title,
          editForm:this.editForm
        }})
    },
    closeDialog() {
      this.editFormVisible = false;
      this.getdata(this.formInline)
    },
    submitForm(editForm) {
      // 点击提交按钮会校验输入框
      this.$refs[editForm].validate((valid) => {
        // 如果校验通过再发请求
        if (valid) {
          if (this.title == "添加") {
            // 实现添加
            wmSave(this.editForm).then(res => {
              if (res.code = 20000) {
                this.editFormVisible = false;
                this.$message.success({
                  message: '仓库添加成功',
                  duration: 500
                })
                this.getdata(this.formInline)
              } else {
                this.$message.error({
                  message: '仓库添加失败',
                  duration: 500
                })
              }
            })
          } else if (this.title = "编辑") {
            console.log(this.editForm)
            userEdit(this.editForm).then(res => {
              if (res.code = 20000) {
                this.editFormVisible = false;
                this.$message.success({
                  message: '仓库更新成功',
                  duration: 500
                })
                this.getdata(this.formInline)
              } else {
                this.$message.error({
                  message: '用户更新失败',
                  duration: 500
                })
              }
            })
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleEdit(index, rowData) {
      // console.log(index,rowData)
      this.title = "编辑"
      this.editForm = rowData;
      this.editFormVisible = true;
    },
    deleteUser(userId) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userDelete(userId).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getdata(this.formInline)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      // val是数组,其中是前端框架自己封装的,其实是勾选的每一行数据对象
      // console.log(val)
      var idArr = [];
      for (var i = 0; i < val.length; i++) {
        var obj = val[i];
        //console.log(obj)
        idArr.push(obj.userId);
      }
      // console.log(idArr)

      this.multipleSelection = idArr;
    },
    handleBatchDel() {
      this.$confirm('批量删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userBatchDel({
          list:this.multipleSelection
        }).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.formInline.pageNum = 1;
            this.getdata(this.formInline)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
</style>
